import React from 'react';
import { enquireScreen } from 'enquire-js';
import { Row, Col, Card, Icon } from 'antd';
import axios from '@/components/Engineering/axios';
import Link from 'umi/link';
import style from './index.less';
import { GridContent, PageHeaderWrapper, RouteContext } from '@ant-design/pro-layout';

export default class CreditIndex extends React.Component {
  state = { creditList: [] };

  componentDidMount() {
    axios.ajax({ url: `${PORTAL_PATH}/api/pj/products` }).then(res => {
      if (res.resultCode == 'SESSION_ERROR') return;
      let lists = [];
      lists.push(
        res.content.filter(function(item) {
          return item.thirdProductId == '60d1884e725344368744bc8d807d03a0'; //广发税银通
        })[0],
      );
      lists.push(
        res.content.filter(function(item) {
          return item.thirdProductId == '618a12bf6886478eb7e64fd3fb8c3b9c'; //设备贷
        })[0],
      );
      lists.push(
        res.content.filter(function(item) {
          return item.thirdProductId == 'e76cc8c80a264b84b6c3005683be958f'; //税票贷
        })[0],
      );
      lists.push(
        res.content.filter(function(item) {
          return item.thirdProductId == '1a17a0b8c6fe450eb15b2f1ecb37bb55'; //流水贷
        })[0],
      );
      lists.push(
        res.content.filter(function(item) {
          return item.thirdProductId == '5b374bf899320df1ed8015d1'; //税兴贷
        })[0],
      );

      lists.push(
        res.content.filter(function(item) {
          return item.thirdProductId == '5b34a8b69932c935eb8ed04d'; //发票贷
        })[0],
      );
      this.setState({
        creditList: lists,
      });
    });
  }

  render() {
    const { creditList } = this.state;
    const creditListRender = creditList.map(item => {
      return (
        <Col xs={12} md={8} className={style.credit}>
          <Card
            className={style.creditCard}
            actions={[
              <Link
                to={`/manage/finance/foreignCreditDetail?id=${item.id}&thirdProductId=${item.thirdProductId}&logo=${item.logo}&productName=${item.productName}`}
              >
                立即申请
              </Link>,
              <Link to={`/manage/finance/foreignCreditRecord`}>查看记录</Link>,
            ]}
          >
            <img src={item.logo} alt="" />
            <h3>{item.productName}</h3>
            <p>额度:{item.maxLoanAmount}万</p>
            <p style={{ height: 60 }}>{item.repaymentMethod}</p>
          </Card>
        </Col>
      );
    });
    return (
      <PageHeaderWrapper title="外贸信用贷">
        <Card>
          <Row
            style={{
              maxWidth: 1000,
              margin: '0 auto',
            }}
            type="flex"
            gutter={16}
          >
            {creditListRender}
          </Row>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
